<!--运动常识-->
<template>
  <div style="height: 75vh;width: 85%;margin-left: 84px">
    <div class="item" v-for="(item,index) in newsList" :key="index">
      <div style="margin: 1vh 1vw;height: 100%;font-weight: bold;" @click="itemClick">
        <div style="margin-bottom: 10px">{{item.knowledgeTitle}}</div>
        <el-row style="height: 70%;">
          <el-col :span="4" >
            <el-image style="width: 100%; height: 100%" :src="require('@/assets/img/ydcs_02.png')" />
          </el-col>
          <el-col style="position: relative" :span="14" :offset="2">
            <div style="position:absolute;top: 10%;font-size: 15px;">
              {{ item.knowledgeContent }}
            </div>
          </el-col>
          <el-col style="position:relative;" :span="2" :offset="2">
            <div style="position: absolute;bottom: 0;">{{dateFormat(item.knowledgeDate)}}</div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "SportsKnowledge",
  data() {
    return {
      newsList:[]
    };
  },
  methods:{
    dateFormat(time) {
      const date = new Date(time);
      const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return month + "-" + day + " ";
    },
    itemClick(){
      // this.$router.push({path: 'SportsKnowledgeDetails'});
    },
    fetchNewsList() {
      axios.get('http://39.101.75.128:8080/knowledge/getDynamic')
          .then(response => {
            console.log(response.data.data)
            this.newsList = response.data.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
  },
  mounted() {
    this.fetchNewsList();
  },
}
</script>



<style scoped>


.item{
  height: 25vh;
  font-size: 18px;
  background-color: #f9ecaa;
  margin:2vh 0;
  border: #999999 solid 1px;
  cursor: pointer;
}
.item:hover{
  background-color: #F8CF01;
}
.el-col{
  height: 100%;
}


</style>
<!--    <div class="item" v-for="index in 5" :key="index">-->
<!--      <div style="margin: 1vh 1vw;height: 100%" @click="itemClick">-->
<!--        <div>标题</div>-->
<!--        <el-row style="height: 70%">-->
<!--          <el-col :span="4" style="background-color: red">-->
<!--            <el-image style="width: 100%; height: 100%" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'" fit="cover" />-->
<!--          </el-col>-->
<!--          <el-col style="position: relative" :span="14" :offset="2">-->
<!--            <div style="position:absolute;top: 50%">-->
<!--              正文-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col style="position:relative;" :span="2" :offset="2">-->
<!--            <div style="position: absolute;bottom: 0;">日期</div>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </div>-->
<!--    </div>-->